<template>
    <div class="overflow">
        <div class="design">
            <div class="container bg_white" style="margin-top:0px">
                <!-- <div class="banner">
                    <ul>
                        <li><a href=""></a></li>
                    </ul>
                </div> -->
                <div class="class">
                    <ul class="clearfloat" id="nav">
                        <li class="pointer" index="" @click="getClassFun">全部</li>
                        <li class="pointer" index="网页" @click="getClassFun">网页</li>
                        <li class="pointer" index="平面" @click="getClassFun">平面</li>
                        <li class="pointer" index="App" @click="getClassFun">App</li>
                        <li class="pointer" index="插画" @click="getClassFun">插画</li>
                    </ul>
                </div>
            </div>
            <div class="work main clearfloat">
                <div class="work_list" v-for="(work,index) in works">
                    <router-link v-bind:to="'/design/designDetail/'+work._id">
                        <div class="cover">
                        <img v-bind:src="'/api/works/'+work.workCover" v-bind:id="work._id" class="pointer" alt="">
                    </div>
                    </router-link>
                    <div class="icon">
                        <!-- 喜欢 -->
                        <span><i class="iconfont" v-bind:index="index" v-bind:articleId="work._id" @click="giveLikeFun" v-bind:class="{bule:isLike[index]}">&#xe645;</i>{{work.giveLikes.length}}</span>
                        <!-- 收藏 -->
                        <span><i class="iconfont" v-bind:index="index" v-bind:articleId="work._id" @click="giveCollectionFun" v-bind:class='{green:isCollection[index]}'>&#xe667;</i>{{work.collections.length}}</span>
                        <span><i class="iconfont">&#xe62b;</i>{{work.commentContents.length}}</span>
                    </div>
                    <div class="user clearfloat">
                        <div class="img_header fl">
                            <img v-bind:src="work.userId.headerImg|filterHeader" alt="" v-if="work.userId.headerImg">
                            <i class="iconfont" v-else>&#xe638;</i>
                        </div>
                        <router-link v-bind:to="'/personal/'+work.userId._id"  class="fl bule pointer" tag="p">{{work.userId.username}}</router-link>
                        <p class="fr">{{work.createdAt| filterDate}}</p>
                    </div>
                </div>    
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>
<script>
import axios from "axios"
import filterHeader from '../../assets/js/filterHeaderImg.js'
import dateformat from '../../assets/js/dateformat.js'
import giveLikeCollection from "../../assets/js/giveLikeCollection"
import scroll from '../../assets/js/scroll'
var workPages=0;
export default {
    data(){
        return {
            works:[],
            isLike:[],
            isCollection:[],
            workClass:'',
            workCount:0
        }
    },
    computed:{
        isLoging: function() {
        return this.$store.state.isLoging;
        },
    },
    created:function(){
        // 检测是否登录
        this.$store.dispatch('isloging');
        // 让头部显示
        this.$store.commit('ISNAVHEAD',true);
        // 获取作品列表
        
        this.getWorkList();
    },
    mounted:function(){
        this.loadinFun(this,this.getWorkList);
        var oNav = document.getElementById('nav');
        var oLi = oNav.getElementsByTagName('li');
        oLi[0].style.color="#007fff";
    },
    methods:{
         // 过滤函数喜欢或收藏的列表中是否存在用户名，来确定用户是否已经点过收藏和喜欢
        filterName:function(value){
            return value.userName===this.$store.state.userName
        },
        // 活动下拉加载数据
        loadinFun:function(_this,callback){
            var that = _this;
            window.onscroll = function(){             
            　　if(scroll.getScrollTop() + scroll.getWindowHeight() == scroll.getScrollHeight()){

                    var b = that.workCount%20===0||that.workCount<20?0:1;
                    var a = parseInt(that.workCount/20)+b;
                    if(workPages<a){
                        ++workPages;
                        console.log(workPages)
                        callback();
                    }           　　　　
            　　}
            }
        },
        // 获取分类的数据
        getClassFun:function(e){
            var oNav = document.getElementById('nav');
            var oLi = oNav.getElementsByTagName('li');
                workPages=0;  
                this.works=[];
                for(var i=0; i<oLi.length; i++){
                    oLi[i].style.color=""
                }
                e.target.style.color="#007fff"
                this.workClass = e.target.getAttribute('index')
                this.getWorkList();
        },
        // 获取作品列表函数
        getWorkList:function(){
            var that = this;
            this.works=[];
            axios.get('/api/work/getWorkList',{
                params:{
                    pages:workPages,
                    workClass:this.workClass
                }
            }).then(function(res){

                that.workCount = res.data.count;
                for(var i=0; i<res.data.works.length; i++){
                    that.works.push(res.data.works[i])
                }
                for(var i=0; i<that.works.length; i++){
                    that.$set(that.isLike,i,that.works[i].giveLikes.filter(that.filterName)[0]?true:false);
                    that.$set(that.isCollection,i,that.works[i].collections.filter(that.filterName)[0]?true:false);
                }
            }).catch(function(err){
                console.log(err)
            })
        },
        // 点击喜欢
            giveLikeFun:function(e){
                if(this.$store.state.userName===""){
                    this.$store.commit('LOGINBOX',true)
                }else{
                     giveLikeCollection(e,'/api/work/giveLike','/api/work/delLike',this.isLike,this,this.getWorkList)
                }
            },
            // 点击收藏
             giveCollectionFun:function(e){
                 if(this.$store.state.userName===""){
                    this.$store.commit('LOGINBOX',true)
                }else{
                     giveLikeCollection(e,'/api/work/giveCollection','/api/work/delCollection',this.isCollection,this,this.getWorkList)
                }
                 
            },
    },
    filters:{
        filterDate:dateformat,
        filterHeader:filterHeader
    }
}
</script>
<style lang="scss" src="../../assets/css/design.scss" scoped>
    
</style>

